<template>
  <a-spin :spinning="loading">
    <div class="person_tab_div">
      <a-tabs @change="tabChange" tab-position="top">
        <a-tab-pane v-if="tabLists.includes('applicant')" key="1" tab="申请人" force-render>
          <div v-if="Object.keys(applicationMap).length != 0">
            <a-collapse v-model="activeKey" v-for="(item, key, index) in applicationMap" :key="index" bordered>
              <a-collapse-panel :key="key" :header="typeLable(key)" v-if="key == Tp_applicantValue.CITIZEN">
                <a-table
                  :scroll="{ x: 800, y: 550 }"
                  :columns="applicantPersonColumns"
                  :data-source="applicationMap[key]"
                  rowKey="id"
                  :pagination="false"
                  :loading="loading"
                  bordered
                >
                  <span slot="index" slot-scope="text, record, index">
                    {{ index + 1 }}
                  </span>
                  <span slot="nameSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.name }}</span>
                        </template>
                        {{ record.name }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="cardnoSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.cardno }}</span>
                        </template>
                        {{ record.cardno }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="addrSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.addr }}</span>
                        </template>
                        {{ record.addr }}
                      </a-tooltip>
                    </div>
                  </span>

                  <span slot="typeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ typeLable(record.type) }}</span>
                      </template>
                      {{ typeLable(record.type) }}
                    </a-tooltip>
                  </span>

                  <span slot="isreprSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ record.isrepr === YesNoValue.Yes ? '是' : '否' }}</span>
                      </template>
                      {{ record.isrepr === YesNoValue.YES ? '是' : '否' }}
                    </a-tooltip>
                  </span>

                  <span slot="cardtypeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ cardTypeLable(record.cardtype) }}</span>
                      </template>
                      {{ cardTypeLable(record.cardtype) }}
                    </a-tooltip>
                  </span>

                  <span slot="filecardSlot" slot-scope="text, record">
                    <div v-if="record.filecardList && record.filecardList.length">
                      <a v-for="item in record.filecardList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteApplicantFile(record, item, 0)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>

                  <span slot="operation" slot-scope="text, record">
                    <template>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadApplicantFile(record, 0)" class="link_css">上传身份证明</a>
                      </div>
                    </template>
                  </span>
                </a-table>
              </a-collapse-panel>
              <a-collapse-panel :key="key" :header="typeLable(key)" v-if="key == Tp_applicantValue.UNIT">
                <a-table
                  :scroll="{ x: 800, y: 550 }"
                  :columns="applicantUnitColumns"
                  :data-source="applicationMap[key]"
                  rowKey="id"
                  :pagination="false"
                  :loading="loading"
                  bordered
                >
                  <span slot="index" slot-scope="text, record, index">
                    {{ index + 1 }}
                  </span>

                  <span slot="nameSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.name }}</span>
                        </template>
                        {{ record.name }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="cardnoSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.cardno }}</span>
                        </template>
                        {{ record.cardno }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="addrSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.addr }}</span>
                        </template>
                        {{ record.addr }}
                      </a-tooltip>
                    </div>
                  </span>

                  <span slot="typeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ typeLable(record.type) }}</span>
                      </template>
                      {{ typeLable(record.type) }}
                    </a-tooltip>
                  </span>

                  <span slot="doccardSlot" slot-scope="text, record">
                    <div v-if="record.doccardList && record.doccardList.length">
                      <a v-for="item in record.doccardList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteApplicantFile(record, item, 1)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>

                  <span slot="operation" slot-scope="text, record">
                    <template>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadApplicantFile(record, 1)" class="link_css">上传身份证明书</a>
                      </div>
                    </template>
                  </span>
                </a-table>
              </a-collapse-panel>
            </a-collapse>
          </div>
          <a-empty v-else style="min-height: 300px" />
        </a-tab-pane>
        <a-tab-pane v-if="tabLists.includes('agent')" key="2" tab="委托代理人" force-render>
          <a-button type="primary" @click="addAgent()" class="btn_primary_color add_btn"> 新增委托代理人 </a-button>
          <div v-if="Object.keys(agentMap).length != 0">
            <a-collapse v-model="activeAgentKey" v-for="(item, key, index) in agentMap" :key="index" bordered>
              <a-collapse-panel :key="key" :header="agentTypeLable(key)" v-if="key == Tp_agentValue.LAWYER">
                <a-table
                  :scroll="{ x: 800, y: 550 }"
                  :columns="agentLawColumns"
                  :data-source="agentMap[key]"
                  rowKey="id"
                  :pagination="false"
                  :loading="loading"
                  bordered
                >
                  <span slot="index" slot-scope="text, record, index">
                    {{ index + 1 }}
                  </span>
                  <span slot="nameSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.name }}</span>
                        </template>
                        {{ record.name }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="cardnoSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.cardno }}</span>
                        </template>
                        {{ record.cardno }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="addrSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.addr }}</span>
                        </template>
                        {{ record.addr }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="typeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ agentTypeLable(record.type) }}</span>
                      </template>
                      {{ agentTypeLable(record.type) }}
                    </a-tooltip>
                  </span>

                  <span slot="cardtypeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ cardTypeLable(record.cardtype) }}</span>
                      </template>
                      {{ cardTypeLable(record.cardtype) }}
                    </a-tooltip>
                  </span>

                  <span slot="doccardSlot" slot-scope="text, record">
                    <div v-if="record.doccardList && record.doccardList.length">
                      <a v-for="item in record.doccardList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(record, item, 1)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>

                  <span slot="fileentrustSlot" slot-scope="text, record">
                    <div v-if="record.fileentrustList && record.fileentrustList.length">
                      <a v-for="item in record.fileentrustList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(record, item, 2)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>

                  <span slot="operation" slot-scope="text, record">
                    <template>
                      <a @click="editAgentPerson(record)" class="link_css">编辑</a>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadAgentFile(record, 1)" class="link_css">上传身份证明书</a>
                      </div>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadAgentFile(record, 2)" class="link_css">上传委托书</a>
                      </div>
                    </template>
                  </span>
                </a-table>
              </a-collapse-panel>

              <a-collapse-panel :key="key" :header="agentTypeLable(key)" v-if="key == Tp_agentValue.LEGAL">
                <a-table
                  :scroll="{ x: 800, y: 550 }"
                  :columns="agentUnitColumns"
                  :data-source="agentMap[key]"
                  rowKey="id"
                  :pagination="false"
                  :loading="loading"
                  bordered
                >
                  <span slot="index" slot-scope="text, record, index">
                    {{ index + 1 }}
                  </span>

                  <span slot="nameSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.name }}</span>
                        </template>
                        {{ record.name }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="cardnoSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.cardno }}</span>
                        </template>
                        {{ record.cardno }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="addrSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.addr }}</span>
                        </template>
                        {{ record.addr }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="typeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ agentTypeLable(record.type) }}</span>
                      </template>
                      {{ agentTypeLable(record.type) }}
                    </a-tooltip>
                  </span>

                  <span slot="cardtypeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ cardTypeLable(record.cardtype) }}</span>
                      </template>
                      {{ cardTypeLable(record.cardtype) }}
                    </a-tooltip>
                  </span>

                  <span slot="filecardSlot" slot-scope="text, record">
                    <div v-if="record.filecardList && record.filecardList.length">
                      <a v-for="item in record.filecardList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%;display: flex; align-items: center;">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(record, item, 0)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>

                  <span slot="fileentrustSlot" slot-scope="text, record">
                    <div v-if="record.fileentrustList && record.fileentrustList.length">
                      <a v-for="item in record.fileentrustList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(record, item, 2)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>

                  <span slot="operation" slot-scope="text, record">
                    <template>
                      <a @click="editAgentPerson(record)" class="link_css">编辑</a>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadAgentFile(record, 0)" class="link_css">上传身份证明书</a>
                      </div>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadAgentFile(record, 2)" class="link_css">上传委托书</a>
                      </div>
                    </template>
                  </span>
                </a-table>
              </a-collapse-panel>

              <a-collapse-panel :key="key" :header="agentTypeLable(key)" v-if="key == Tp_agentValue.CITIZEN">
                <a-table
                  :scroll="{ x: 800, y: 550 }"
                  :columns="agentOtherColumns"
                  :data-source="agentMap[key]"
                  rowKey="id"
                  :pagination="false"
                  :loading="loading"
                  bordered
                  size="middle"
                >
                  <span slot="index" slot-scope="text, record, index">
                    {{ index + 1 }}
                  </span>
                  <span slot="nameSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.name }}</span>
                        </template>
                        {{ record.name }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="cardnoSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.cardno }}</span>
                        </template>
                        {{ record.cardno }}
                      </a-tooltip>
                    </div>
                  </span>
                  <span slot="addrSlot" slot-scope="text, record">
                    <div class="beyond_hiding">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span style="width: 100%">{{ record.addr }}</span>
                        </template>
                        {{ record.addr }}
                      </a-tooltip>
                    </div>
                  </span>

                  <span slot="typeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ agentTypeLable(record.type) }}</span>
                      </template>
                      {{ agentTypeLable(record.type) }}
                    </a-tooltip>
                  </span>

                  <span slot="cardtypeSlot" slot-scope="text, record">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ cardTypeLable(record.cardtype) }}</span>
                      </template>
                      {{ cardTypeLable(record.cardtype) }}
                    </a-tooltip>
                  </span>

                  <span slot="filecardSlot" slot-scope="text, record" style="text-align: left;">
                    <div v-if="record.filecardList && record.filecardList.length">
                      <a v-for="item in record.filecardList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%;display: flex; align-items: center;">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(record, item, 0)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>
                  <span slot="fileentrustSlot" slot-scope="text, record">
                    <div v-if="record.fileentrustList && record.fileentrustList.length">
                      <a v-for="item in record.fileentrustList" :key="item.id" class="file-css">
                        <div style="width: 60%; display: flex; align-items: center">
                          <span :title="item.filename" style="width: 100%">
                            <span @click="previewFile(item)" class="beyond_hiding">
                              <a-icon type="folder" theme="filled" />
                              {{ item.filename }}
                            </span>
                          </span>
                        </div>
                        <div style="width: 40%; display: flex; align-items: center">
                          <div class="button_flex" @click="download(item)">
                            <a-icon type="download" style="margin-right: 8px" />
                            <a class="download_div">下载</a>
                          </div>
                          <a-divider type="vertical" />
                          <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(record, item, 2)">
                            <div class="button_flex">
                              <a-icon type="delete" style="margin-right: 8px" />
                              <a class="download_div">删除</a>
                            </div>
                          </a-popconfirm>
                        </div>
                      </a>
                    </div>
                    <div v-else>未上传附件</div>
                  </span>

                  <span slot="operation" slot-scope="text, record">
                    <template>
                      <a @click="editAgentPerson(record)" class="link_css">编辑</a>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadAgentFile(record, 0)" class="link_css">上传身份证明</a>
                      </div>
                      <div class="button_flex">
                        <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
                        <a @click="uploadAgentFile(record, 2)" class="link_css">上传委托书</a>
                      </div>
                    </template>
                  </span>
                </a-table>
              </a-collapse-panel>
            </a-collapse>
          </div>
          <a-empty v-else style="min-height: 300px" />
        </a-tab-pane>
      </a-tabs>
    </div>
    <MultiUploadBasic ref="multiUploadBasic" @importFileFun="importFileFun"></MultiUploadBasic>
    <AgentPersonAddView ref="agentPersonAddView" :applyid="applyid" @requery="getAgentlist"></AgentPersonAddView>
  </a-spin>
</template>

<script>
import { Tp_applicantList, Tp_applicantValue } from '@/enumeration/Tp_applicant'
import { Tp_agentList, Tp_agentValue } from '@/enumeration/Tp_agent'
import { Tp_cardList } from '@/enumeration/Tp_card'
import { kkfilePreview } from '@/utils/util.js'
import { getApplicantWithGroup, deleteApplicantFile, updateApplicantAttachId } from '@/api/accept/apl_applicant'
import { getAgentWithGroup, deleteAgentFile, updateAgentAttachId } from '@/api/accept/apl_agent'
import { YesNoValue } from '@/enumeration/YesNo'
import { downloadFileWithUrl } from '@/utils/util'
import { minioUploadMore } from '@/api/base/file'
import { FILETYPE, FILESIZE } from '@/store/mutation-types'
export default {
  name: 'PersonMaterials',
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    },
    tabLists: {
      // 渲染的tabs
      type: Array,
      required: true
    }
  },
  data () {
    return {
      key: '1',
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      Tp_applicant: Tp_applicantList,
      Tp_applicantValue: Tp_applicantValue,
      Tp_card: Tp_cardList,
      Tp_agentValue: Tp_agentValue,
      Tp_agent: Tp_agentList,
      YesNoValue: YesNoValue,
      applicantPersonColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '名称',
          align: 'center',
          width: '80px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件类型',
          key: 'cardtype',
          dataIndex: 'cardtype',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'cardtypeSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系地址',
          key: 'addr',
          dataIndex: 'addr',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          align: 'center',
          width: '150px'
        },
        {
          title: '邮政编码',
          key: 'postcode',
          dataIndex: 'postcode',
          align: 'center',
          width: '100px'
        },
        {
          title: '是否代表人',
          key: 'isrepr',
          dataIndex: 'isrepr',
          width: '150px',
          align: 'center',
          scopedSlots: { customRender: 'isreprSlot' }
        },
        {
          title: '身份证明',
          dataIndex: 'filecardList',
          key: 'filecardList',
          align: 'center',
          width: '350px',
          scopedSlots: { customRender: 'filecardSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],

      applicantUnitColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '名称',
          align: 'left',
          width: '100px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '信用代码',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '100px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系地址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '邮政编码',
          key: 'postcode',
          dataIndex: 'postcode',
          width: '100px'
        },
        {
          title: '法人/代表人',
          key: 'manager',
          dataIndex: 'manager',
          width: '120px'
        },
        {
          title: '工作',
          key: 'job',
          dataIndex: 'job',
          width: '100px'
        },
        {
          title: '身份证明书',
          dataIndex: 'doccardList',
          key: 'doccardList',
          width: '350px',
          scopedSlots: { customRender: 'doccardSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 律师代表
      agentLawColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '类型',
          align: 'left',
          width: '150px',
          key: 'type',
          dataIndex: 'type',
          scopedSlots: { customRender: 'typeSlot' }
        },
        {
          title: '名称',
          align: 'left',
          width: '100px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '工作单位',
          key: 'unit',
          dataIndex: 'unit',
          width: '100px'
        },
        {
          title: '住址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '身份证明书',
          dataIndex: 'doccardList',
          key: 'doccardList',
          width: '350px',
          scopedSlots: { customRender: 'doccardSlot' }
        },
        {
          title: '委托书',
          dataIndex: 'fileentrustList',
          key: 'fileentrustList',
          width: '350px',
          scopedSlots: { customRender: 'fileentrustSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 法定代表
      agentUnitColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '类型',
          align: 'left',
          width: '150px',
          key: 'type',
          dataIndex: 'type',
          scopedSlots: { customRender: 'typeSlot' }
        },
        {
          title: '名称',
          align: 'left',
          width: '80px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件类型',
          key: 'cardtype',
          dataIndex: 'cardtype',
          width: '100px',
          scopedSlots: { customRender: 'cardtypeSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '住址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '身份证明',
          dataIndex: 'filecardList',
          key: 'filecardList',
          width: '350px',
          scopedSlots: { customRender: 'filecardSlot' }
        },
        {
          title: '委托书',
          dataIndex: 'fileentrustList',
          key: 'fileentrustList',
          width: '350px',
          scopedSlots: { customRender: 'fileentrustSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],

      agentOtherColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '类型',
          align: 'left',
          width: '150px',
          key: 'type',
          dataIndex: 'type',
          scopedSlots: { customRender: 'typeSlot' }
        },
        {
          title: '名称',
          align: 'left',
          width: '80px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件类型',
          key: 'cardtype',
          dataIndex: 'cardtype',
          width: '100px',
          scopedSlots: { customRender: 'cardtypeSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '工作单位',
          key: 'unit',
          dataIndex: 'unit',
          width: '100px'
        },
        {
          title: '住址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '邮政编码',
          key: 'postcode',
          dataIndex: 'postcode',
          width: '100px'
        },
        {
          title: '身份证明',
          dataIndex: 'filecardList',
          key: 'filecardList',
          width: '350px',
          scopedSlots: { customRender: 'filecardSlot' }
        },
        {
          title: '委托书',
          dataIndex: 'fileentrustList',
          key: 'fileentrustList',
          width: '350px',
          scopedSlots: { customRender: 'fileentrustSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      applicationMap: {}, // 申请人材料
      agentMap: {}, // 委托代理人材料
      loading: false,
      activeKey: [],
      activeAgentKey: [],

      selectData: {}, // 点击按钮选择的行数据
      operateType: undefined, // 操作类型 0：身份证明 1:身份证明书，2：第三人证明材料
      operateKey: undefined,
      acceptFileType: FILETYPE
    }
  },
  components: {
    MultiUploadBasic: () => import('@/views/materials/multiUpload/MultiUploadBasic.vue'),
    AgentPersonAddView: () => import('@/views/materials/AgentPersonAddView.vue')
  },
  created () {
    this.tabChange('1')
  },
  methods: {
    tabChange (val) {
      this.key = val
      this.getFileList()
    },
    // 状态转换显示
    typeLable (val) {
      for (const key in this.Tp_applicant) {
        if (this.Tp_applicant[key].value == val) {
          return this.Tp_applicant[key].name
        }
      }
      return val
    },
    agentTypeLable (val) {
      for (const key in this.Tp_agent) {
        if (this.Tp_agent[key].value == val) {
          return this.Tp_agent[key].name
        }
      }
      return val
    },
    cardTypeLable (val) {
      for (const key in this.Tp_card) {
        if (this.Tp_card[key].value == val) {
          return this.Tp_card[key].name
        }
      }
      return val
    },
    // 预览文件
    previewFile (record) {
      window.open(kkfilePreview(record.path))
    },
    download (record) {
      if (record && record.path) {
        downloadFileWithUrl(record.path, record.filename)
      }
    },
    deleteApplicantFile (record, file, type) {
      if (type == null || type == undefined) {
        this.$message.error('操作类型为空')
      }
      deleteApplicantFile({ id: record.id, type: type, attachid: file.id }).then(res => {
        console.log('deleteApplicantFile', res.data)
        if (res.code == 0) {
          this.getApplicantlist()
        } else {
          this.$message.success('删除失败')
        }
      })
    },
    deleteAgentFile (record, file, type) {
      if (type == null || type == undefined) {
        this.$message.error('操作类型为空')
      }
      deleteAgentFile({ id: record.id, type: type, attachid: file.id }).then(res => {
        console.log('deleteAgentFile', res.data)
        if (res.code == 0) {
          this.getAgentlist()
        } else {
          this.$message.success('删除失败')
        }
      })
    },

    // 上传附件
    uploadApplicantFile (record, operateType) {
      this.selectData = record
      this.operateType = operateType
      this.operateKey = 'applicant'
      this.$refs.multiUploadBasic.importVisible = true
    },
    // 上传附件
    uploadAgentFile (record, operateType) {
      this.selectData = record
      this.operateType = operateType
      this.operateKey = 'agent'
      this.$refs.multiUploadBasic.importVisible = true
    },
    /**
     * 确定保存导入数据
     */
    importFileFun (importFileList) {
      console.log('importFileList', importFileList)
      const files = []
      importFileList.forEach(item => {
        files.push(item)
      })
      this.$refs.multiUploadBasic.loading = true
      if (this.operateType == null || this.operateType == undefined) {
        this.$message.error('操作类型为空')
      }
      if (this.operateKey == 'applicant') {
        minioUploadMore(files)
          .then(res => {
            if (res.code == 0) {
              let attachs = res.data
              let attachids = []
              attachs.forEach(item => {
                attachids.push(item.id)
              })
              if (this.selectData.attachid != '' && this.selectData.attachid != null) {
                const selectAttachIds = this.selectData.attachid.split(',')
                attachids = attachids.concat(selectAttachIds)
              }
              if (this.operateType == 0) {
                // 身份证明
                if (this.selectData.filecard != '' && this.selectData.filecard != null) {
                  const filecardIds = this.selectData.filecard.split(',')
                  attachids = attachids.concat(filecardIds)
                }
              } else if (this.operateType == 1) {
                // 身份证明书
                if (this.selectData.doccard != '' && this.selectData.doccard != null) {
                  const doccardIds = this.selectData.doccard.split(',')
                  attachids = attachids.concat(doccardIds)
                }
              }
              updateApplicantAttachId({
                id: this.selectData.id,
                type: this.operateType,
                attachid: attachids.join(',')
              }).then(res2 => {
                if (res2.code == 0) {
                  this.getApplicantlist()
                  this.$message.success('上传成功')
                  this.$refs.multiUploadBasic.handleCancel()
                } else {
                  this.$message.error('上传失败')
                  this.$refs.multiUploadBasic.handleCancel()
                }
              })
            }
          })
          .finally(() => {
            this.$refs.multiUploadBasic.loading = false
          })
      } else {
        minioUploadMore(files)
          .then(res => {
            if (res.code == 0) {
              let attachs = res.data
              let attachids = []
              attachs.forEach(item => {
                attachids.push(item.id)
              })
              if (this.selectData.attachid != '' && this.selectData.attachid != null) {
                const selectAttachIds = this.selectData.attachid.split(',')
                attachids = attachids.concat(selectAttachIds)
              }
              if (this.operateType == 0) {
                // 身份证明
                if (this.selectData.filecard != '' && this.selectData.filecard != null) {
                  const filecardIds = this.selectData.filecard.split(',')
                  attachids = attachids.concat(filecardIds)
                }
              } else if (this.operateType == 1) {
                // 身份证明书
                if (this.selectData.doccard != '' && this.selectData.doccard != null) {
                  const doccardIds = this.selectData.doccard.split(',')
                  attachids = attachids.concat(doccardIds)
                }
              } else if (this.operateType == 2) {
                // 委托书详情
                if (this.selectData.fileentrust != '' && this.selectData.fileentrust != null) {
                  const fileentrustIds = this.selectData.fileentrust.split(',')
                  attachids = attachids.concat(fileentrustIds)
                }
              }
              updateAgentAttachId({
                id: this.selectData.id,
                type: this.operateType,
                attachid: attachids.join(',')
              }).then(res2 => {
                if (res2.code == 0) {
                  this.getAgentlist()
                  this.$message.success('上传成功')
                  this.$refs.multiUploadBasic.handleCancel()
                } else {
                  this.$message.error('上传失败')
                  this.$refs.multiUploadBasic.handleCancel()
                }
              })
            }
          })
          .finally(() => {
            this.$refs.multiUploadBasic.loading = false
          })
      }
    },

    getFileList () {
      if (this.key == '1') {
        this.getApplicantlist()
      } else {
        this.getAgentlist()
      }
    },
    // 查询委托代理人
    getAgentlist () {
      getAgentWithGroup({ applyid: this.applyid }).then(res => {
        console.log('getAgentlist', res.data)
        if (res.code == 0) {
          this.agentMap = res.data
          if (this.agentMap != null && this.agentMap != undefined && Object.keys(this.agentMap).length >= 0) {
            for (const key in this.agentMap) {
              this.activeAgentKey.push(key)
            }
          } else {
            this.agentMap = {}
          }
        } else {
          this.agentMap = {}
          // this.upagination.total = 0
        }
      })
    },
    // 查询申请人
    getApplicantlist () {
      getApplicantWithGroup({ applyid: this.applyid }).then(res => {
        console.log('getApplicantlist', res.data)
        if (res.code == 0) {
          this.applicationMap = res.data
          if (
            this.applicationMap != null &&
            this.applicationMap != undefined &&
            Object.keys(this.applicationMap).length >= 0
          ) {
            for (const key in this.applicationMap) {
              this.activeKey.push(key)
            }
          } else {
            this.applicationMap = {}
          }
        } else {
          this.applicationMap = {}
        }
      })
    },

    // 新增委托代理人
    addAgent () {
      this.$refs.agentPersonAddView.init(false)
    },
    editAgentPerson (record) {
      this.$refs.agentPersonAddView.init(true, record)
    }
  }
}
</script>

<style lang="less" scoped>
.file-css {
  /* display: block; */
  display: flex;
  margin-bottom: 5px;
  word-break: break-all;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
}
::v-deep .ant-tabs-vertical.ant-tabs-card.ant-tabs-left .ant-tabs-card-bar.ant-tabs-left-bar .ant-tabs-tab-active {
  margin-left: 10px;
  margin-right: 0 !important;
  border-right: 1px solid #e8e8e8;
}
::v-deep .ant-tabs-nav-wrap {
  height: 36px !important;
}
// .line {
//   text-overflow: -o-ellipsis-lastline;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   display: -webkit-box;
//   -webkit-line-clamp: 3;
//   line-clamp: 3;
//   -webkit-box-orient: vertical;
// }

// /deep/ .ant-table-tbody > tr > td {
//   border: 0;
// }

// /deep/.ant-table-thead > tr > th {
//   font-size: 16px !important;
//   color: #666666 !important;
//   border: 0;
// }

.beyond_hiding {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.download_div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.link_css {
  display: block;
}

.add_btn {
  z-index: 20;
  margin-left: 90%;
}

.button_flex {
  display: flex;
  align-items: center;
}
::v-deep .ant-collapse {
  margin: 14px 0px;
}
::v-deep .ant-table-thead > tr > th {
  background: #f2f8fc;
}

.person_tab_div {
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 15%;
    width: 50px !important;
  }
  ::v-deep .ant-table-column-title {
    font-weight: bold;
  }
  ::v-deep .ant-tabs-nav .ant-tabs-tab {
    font-weight: bold;
  }
  ::v-deep .ant-collapse-header {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
